<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>baby易购</title>
    <meta name="description" content="baby易购">
    <meta name="keywords" content="baby易购">

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
    .el-main{
        position: absolute;
        top: 83px;
        bottom: 0px;
        left: 220px;
        right: 10px;
        padding: 0;
    }
    </style>
</head>

<body class="hold-transition skin-purple sidebar-mini">
    <div id="app">
        <el-container>
            <el-header  class="main-header" style="height:70px;">
                
                <nav class="navbar navbar-static-top" :class=''>
                    <!-- Logo -->
                    <a href="index.html" class="logo" style="text-align:center">
                        <span class="logo-lg"  v-show='!isCollapse'><img src="img/logo.png"></span>
                    </a>
                    <div class="right-menu">
                        <el-dropdown class="avatar-container right-menu-item" trigger="click">
                            <div class="avatar-wrapper">
                                <img src="img/user2-160x160.jpg" class="user-avatar">
                                Jay.Liu
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item divided>
                                    <span style="display:block;">修改密码</span>
                                </el-dropdown-item>
                                <el-dropdown-item divided>
                                        <span style="display:block;">退出</span>
                                    </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="topbar-title">
                        <!-- 注意：这里就是topNavState作用之处，根据当前路由所在根路由的type值判断显示不同顶部导航菜单 -->
                        <el-row>
                          <el-col :span="24">
                            <el-menu class="el-menu-demo headNav" mode="horizontal" :default-active="defaultActiveIndex">
                              <el-menu-item :index="item.path" v-for="item in menuList" @click="handleSelect(item)" ><i class="iconNav" :class="item.icon"></i>{{item.title}}</el-menu-item>
                            </el-menu>
                          </el-col>
                        </el-row>
                      </div>
                    
                    
                </nav>
            </el-header>
            <el-container>
                <el-aside :width="tabWidth+'px'" id="asieHeight">
                    
                    <el-menu default-active="2-1-2"  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" :default-openeds="openeds">
                        <sidebar-item :key="data.path" v-for="data in data.children" :item="data" />
                    </el-menu>
                </el-aside>
                <el-container>
                    <iframe name="right" id="iframepage" class="el-main" src="commodity-add.html" width="100%" height="100%" frameborder="0" ranat="server"></iframe>
                </el-container>
            </el-container>
        </el-container>
        <el-footer>
            <footer class="main-footer">
                <div class="pull-right hidden-xs">
                    <b>Version</b> 1.0
                </div>
                <strong>Copyright &copy; 2016-2019 <a href="http://www.itcast.cn">baby研发部</a>.</strong> All rights reserved.
            </footer>
            <!-- 底部导航 /-->
        </el-footer>
    </div>
</body>
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="plugins/jquery/dist/jquery.js"></script>
<script src="/js/axios.js"></script>
<script src="js/menu.js"></script>
<script>
    Vue.component('sidebar-item', {
        props: {
            item: {
            type: Object,
            required: true
            }
        },
        template: `
        <div v-if="item.children">
            <template v-if="item.children.length == 0">
                <el-menu-item :index="item.path">
                <i class="icon" :class="item.icon"></i>
                <a :href="item.linkUrl" target="right">{{item.title}}</a>
                </el-menu-item>
            </template>
            <template v-else :index="item.path">
                <div slot="title" class="el-submenu__title">
                    <i class="icon" :class="item.icon"></i>
                    {{item.title}}
                </div>

                <template v-for="child in item.children">
                    <sidebar-item
                    v-if="child.children&&child.children.length>0"
                    :item="child"
                    :key="child.path"/>
                    <el-menu-item v-else :key="child.path" :index="child.path" style='padding-left:68px'>
                    <a :href="child.linkUrl" target="right">{{child.title}}</a>
                    </el-menu-item>
                </template>
            </template>          
        </div>`
    })
    new Vue({
        el: '#app',
        // router,
        data() {
        return { 
            visible: false,
            isCollapse: false,
            tabWidth: 220,
            test1: 1,
            intelval: null,
            winfo:'winfo',
            data:[],
            menuList:[],
            defaultActiveIndex: "1",
            openeds: [],
            }
        },
        created() {
            axios.get("/menu/findMenu").then( response=>{
                this.menuList=response.data;
                this.data=response.data[0]
                var data=[]
                for(var i=0;i<response.data[0].children.length;i++){
                    data.push(response.data[0].children[i].path)
                }
                this.openeds=data
            })
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },

            isClossTabFun(){
                clearInterval(this.intelval);
                if(!this.isCollapse){
                    this.intelval = setInterval(()=>{
                        if(this.tabWidth<= 70)
                            clearInterval(this.intelval);
                        this.tabWidth -= 1;
                    }, 0);
                    this.winfo='winfo'
                    $(".el-main").css({
                        'width':$('body').width()-53 + 'px',
                        'left':53+'px'
                    });
                    $(".el-footer").css({
                        'left':50+'px'
                    });
                }else{
                    this.tabWidth = 200;
                    var wd = 200;
                    $(".el-main").css({
                        'width':$('body').width() - wd + 'px',
                        'left':200+'px'
                    });
                    $(".el-footer").css({
                        'left':180+'px'
                    });
                }
                this.isCollapse = !this.isCollapse;
            },
            hasOneShowingChild(children, parent) {
            // console.log(parent)
            const showingChildren = children.filter(item => {
                if (item.hidden) {
                return false
                } else {
                // Temp set(will be used if only has one showing child)
                this.onlyOneChild = item
                return true
                }
            })

            // When there is only one child router, the child router is displayed by default
            if (showingChildren.length === 1) {
                return true
            }

            // Show parent if there are no child router to display
            if (showingChildren.length === 0) {
                this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
                return true
            }

            return false
            },
            resolvePath(routePath) {
            if (this.isExternalLink(routePath)) {
                return routePath
            }
            return path.resolve(this.basePath, routePath)
            },
            isExternalLink(routePath) {
            return isExternal(routePath)
            },
            isExternal(path) {
            return /^(https?:|mailto:|tel:)/.test(path)
            },
            handleSelect(key) {
                var data=[]
                for(var i=0;i<key.children.length;i++){
                    data.push(key.children[i].path)
                }
                this.openeds=data
                this.data=key
            }
        }
    })
    $(function() {
            var wd = 220;
            $(".el-main").css('width', $('body').width() - wd + 'px');
            $("#asieHeight").css('height',$(window).height()+'px')
        })
</script>
</html>
